<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../lib/zh-chess.browser.js"></script>

  <style>
    #app {
      height: 800px;
      width: 800px;
    }

    select {
      width: 80px;
    }

    div {
      margin: 10px;
    }
  </style>
</head>

<body>
  <canvas id="app" width="800" height="800"></canvas>
  <div>
    选择红黑方：
    <select class="side"> </select>
    <button class="side_btn">确定</button>
  </div>
  <div class="select_1">
    文字移动1：
    <select class="side">
    </select>
    <select class="first">
    </select>
    <select class="second">
    </select>
    <select class="third">
    </select>
    <select class="fourth">
    </select>
    <button class="word_1">发送</button>
  </div>
  <div class="select_2">
    文字移动2：
    <select class="side">
    </select>
    <select class="first">
    </select>
    <select class="second">
    </select>
    <select class="third">
    </select>
    <select class="fourth">
    </select>
    <button class="word_1">发送</button>
  </div>
  <div class="select_6">
    文字移动3：
    <select class="side">
    </select>
    <select class="first">
    </select>
    <select class="second">
    </select>
    <select class="third">
    </select>
    <select class="fourth">
    </select>
    <button class="word_1">发送</button>
  </div>
  <div class="select_4">
    坐标移动：
    <select class="side">
    </select>
    startX:
    <select class="x1">
    </select>
    startY:
    <select class="y1">
    </select>
    endX:
    <select class="x2">
    </select>
    endY:
    <select class="y2">
    </select>
    <button class="word_3">发送</button>
  </div>
  <div class="select_3">
    切换游戏玩家视角：
    <select class="first">
    </select>
    <button class="word_2">确定</button>
  </div>
</body>
<script>
  const app = document.getElementById("app")
  const ctx = app.getContext("2d")

  let zhchess = new ZhChess.default({
    ctx,
    gameWidth: 500,
    gameHeight: 500,
    gamePadding: 20,
    scaleRatio: window.devicePixelRatio,
    checkerboardBackground:"#f6af47"
  })
  app.addEventListener("click", zhchess.listenClickAsync, false)
  zhchess.on("log", console.log)
  zhchess.on("moveFail", console.error)
  zhchess.on("move", console.log)
  zhchess.on("over", function (side) {
    console.log(side + "方，赢了！");
    setTimeout(() => {
      zhchess.gameStart(side === "RED" ? "BLACK" : "RED")
    }, 3000);
  })
</script>
<script>
  var side = [{ lab: "红方", val: "RED" }, { lab: "黑方", val: "BLACK" }]
  document.querySelectorAll(".side").forEach(item => {
    item.innerHTML = side.map(i => `<option value="${i.val}">${i.lab}</option>`)
  })
  document.querySelector(".side_btn").addEventListener("click", function () {
    const side = this.parentElement.querySelector(".side").value
    zhchess.gameStart(side)
  })


  var chessName = ["车", "将", "兵", "炮", "象", "士", "马"]
  var num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  var point = [0, ...num]
  var move = ["进", "平", "退"]
  var moveStyle = ["前", "中", "后"]

  document.querySelector(".select_1").querySelector(".first").innerHTML = chessName.map(i => `<option value="${i}">${i}</option>`)
  document.querySelector(".select_1").querySelector(".second").innerHTML = num.map(i => `<option value="${i}">${i}</option>`)
  document.querySelector(".select_1").querySelector(".fourth").innerHTML = num.map(i => `<option value="${i}">${i}</option>`)
  document.querySelector(".select_1").querySelector(".third").innerHTML = move.map(i => `<option value="${i}">${i}</option>`)

  document.querySelector(".select_2").querySelector(".first").innerHTML = moveStyle.concat(num).map(i => `<option value="${i}">${i}</option>`)
  document.querySelector(".select_2").querySelector(".second").innerHTML = chessName.map(i => `<option value="${i}">${i}</option>`)
  document.querySelector(".select_2").querySelector(".fourth").innerHTML = num.map(i => `<option value="${i}">${i}</option>`)
  document.querySelector(".select_2").querySelector(".third").innerHTML = move.map(i => `<option value="${i}">${i}</option>`)


  document.querySelector(".select_6").querySelector(".first").innerHTML = moveStyle.map(i => `<option value="${i}">${i}</option>`)
  document.querySelector(".select_6").querySelector(".second").innerHTML = num.map(i => `<option value="${i}">${i}</option>`)
  document.querySelector(".select_6").querySelector(".fourth").innerHTML = num.map(i => `<option value="${i}">${i}</option>`)
  document.querySelector(".select_6").querySelector(".third").innerHTML = move.map(i => `<option value="${i}">${i}</option>`)

  document.querySelectorAll(".word_1").forEach(item => {
    item.addEventListener("click", function () {
      let side = this.parentElement.querySelector(".side").value
      let first = this.parentElement.querySelector(".first").value
      let second = this.parentElement.querySelector(".second").value
      let third = this.parentElement.querySelector(".third").value
      let fourth = this.parentElement.querySelector(".fourth").value
      zhchess.moveStr(first + second + third + fourth, side)
    })
  })

  document.querySelector(".select_3").querySelector(".first").innerHTML = side.map(i => `<option value="${i.val}">${i.lab}</option>`)
  document.querySelectorAll(".word_2").forEach(item => {
    item.addEventListener("click", function () {
      let side = this.parentElement.querySelector(".first").value
      zhchess.changePlaySide(side)
    })
  })

  document.querySelector(".select_4").querySelector(".x1").innerHTML = point.map(i => `<option value="${i}">${i}</option>`)
  document.querySelector(".select_4").querySelector(".x2").innerHTML = point.map(i => `<option value="${i}">${i}</option>`)
  document.querySelector(".select_4").querySelector(".y1").innerHTML = point.map(i => `<option value="${i}">${i}</option>`)
  document.querySelector(".select_4").querySelector(".y2").innerHTML = point.map(i => `<option value="${i}">${i}</option>`)
  document.querySelectorAll(".word_3").forEach(item => {
    item.addEventListener("click", function () {
      let side = this.parentElement.querySelector(".side").value
      let x1 = this.parentElement.querySelector(".x1").value
      let x2 = this.parentElement.querySelector(".x2").value
      let y1 = this.parentElement.querySelector(".y1").value
      let y2 = this.parentElement.querySelector(".y2").value
      zhchess.move({ x: Number(x1), y: Number(y1) }, { x: Number(x2), y: Number(y2) }, side)
    })
  })

</script>

</html>